<template>
  <div class="ew-lg-container">
    <el-row>
      <el-col :span="18" :xs="0" class="ew-lg-left ew-lg-fc">
        <img
          src="@/assets/images/wallhaven-zyov8y.png"
          alt="背景图"
          class="ew-lg-bg"
        />
      </el-col>
      <el-col :span="6" :xs="24" class="ew-lg-right ew-lg-fc">
        <el-form class="ew-lg-form">
          <h1>你好！</h1>
          <h2>欢迎来到 Eanchao Web</h2>
          <!-- <el-divider /> -->
          <el-form-item>
            <el-input
              size="large"
              placeholder="请输入账号"
              :prefix-icon="User"
              v-model="loginForm.username"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              size="large"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              v-model="loginForm.password"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="ew-lg-btn" @click="login">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive } from 'vue'

let loginForm = reactive({
  username: 'admin',
  password: '123456',
})

const login = () => {
  console.log('success')
}
</script>

<style scoped lang="scss">
.ew-lg-container {
  width: 100vw;
  height: 100vh;
  position: relative;

  .ew-lg-left {
    height: 100vh;

    .ew-lg-bg {
      height: 100vh;
    }
  }

  .ew-lg-right {
    // background-color: coral;
    height: 100vh;
    // border-left: 1px solid #000;

    .ew-lg-form {
      width: 80%;

      h1 {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 40px;
      }

      h2 {
        padding-bottom: 10px;
        font-style: italic;
      }

      .ew-lg-btn {
        height: 40px;
        width: 100%;
      }
    }
  }
}

.ew-lg-fc {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
